<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组</title>
<style>

.bar rect {
  fill: steelblue;
}

.bar text {
  fill: #fff;
  font: 10px sans-serif;
}
</style>
</head>
<body>
<a target="_blank" href="https://github.com/d3/d3-array/blob/master/README.md"><h1>文档</h1></a>
	
<svg width="960" height="500"></svg>
	<script
		src="${pageContext.request.contextPath}/static/fw/plugin/d3/d3.min.js"
		charset="utf-8"></script>
	<script>
	var a = [0, 10, 30];
	var min = d3.min(a);
	console.log(min);
	console.log(d3.extent(a));
	console.log(d3.quantile(a, 0)); // 0
	console.log(d3.quantile(a, 0.5)); // 10
	console.log(d3.quantile(a, 1)); // 30
	console.log(d3.quantile(a, 0.25)); // 5
	console.log(d3.quantile(a, 0.75)); // 20
	console.log(d3.quantile(a, 0.1)); // 2
	var array = [{foo: 42}, {foo: 91}];
	console.log(d3.scan(array, function(a, b) { return a.foo - b.foo; })); // 0
	console.log(d3.scan(array, function(a, b) { return b.foo - a.foo; })); // 1

	var data = d3.range(1000).map(d3.randomBates(10));

	var formatCount = d3.format(",.0f");

	var svg = d3.select("svg"),
	    margin = {top: 10, right: 30, bottom: 30, left: 30},
	    width = +svg.attr("width") - margin.left - margin.right,
	    height = +svg.attr("height") - margin.top - margin.bottom,
	    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scaleLinear()
	    .rangeRound([0, width]);
    console.log(x.domain())
	var bins = d3.histogram()
	    .domain(x.domain())
	    .thresholds(x.ticks(20))
	    (data);

	var y = d3.scaleLinear()
	    .domain([0, d3.max(bins, function(d) { return d.length; })])
	    .range([height, 0]);

	var bar = g.selectAll(".bar")
	  .data(bins)
	  .enter().append("g")
	    .attr("class", "bar")
	    .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; });

	bar.append("rect")
	    .attr("x", 1)
	    .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
	    .attr("height", function(d) { return height - y(d.length); });

	bar.append("text")
	    .attr("dy", ".75em")
	    .attr("y", 6)
	    .attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2)
	    .attr("text-anchor", "middle")
	    .text(function(d) { return formatCount(d.length); });

	g.append("g")
	    .attr("class", "axis axis--x")
	    .attr("transform", "translate(0," + height + ")")
	    .call(d3.axisBottom(x));
	</script>
</body>
</html>